<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <link href="fonts/font-awesome.min.css" rel="stylesheet" />
    <link href="css/jquery.mloading.css" rel="stylesheet" />
    <link href="css/mobile-select-area.css" rel="stylesheet" />
    <link href="css/common.css" rel="stylesheet" />
    <title>e车险保</title>
    <style type="text/css">
        .box{
            margin-bottom:0.455rem;
        }
        .button{
            display: flex;
            display: -webkit-flex;
            margin-bottom: 2rem;
        }
        .button .left{
            flex: 1;
            margin-right:0.91rem;
            height:100%;
        }
        .button .right{
            flex:1;
            height:100%;
        }
        .button .right input{
            text-align: center;
        }
        .protocol{
            text-align: center;
            margin:1.82rem 0;
            font-size: 1.23rem;
            color: #333333;
            line-height: 2rem;
        }
        .protocol a{
            color: #0081CC;
        }
        .title-box{
            position: relative;
        }
        .title-box i{
            position:absolute;
            right:1.36rem;
        }
        .modal .body{
            margin:0 1.64rem 0 1.64rem;
            background: #fff;
        }
        .modal .body .content{
            position:absolute;
            top:2rem;
            left:0;
            right:0;
            bottom:0;
            overflow: auto;
            padding:0 1.82rem;
        }
        .modal .body .head{
            height:1.82rem;
            line-height: 1.82rem;
            margin-top:0.91rem;
            margin-right:0.91rem;
        }
        .modal .body .head img{
            height:1.82rem;
            float:right;
        }
        .modal .body{
            top:0;
        }
        .chk-box{
            display: inline-block;
        }
        .box .item .left{
            flex: 1;
            -webkit-flex: 1;
        }
        #insuranceInfo.box .item .left{
            flex: 3;
            -webkit-flex: 3;
        }
        #insuranceInfo.box .item .right input{
            color:#0081CC;
        }
        .box .item #address.right{
            flex: auto;
            -webkit-flex: auto;
            width:21rem;
        }
    </style>
</head>
<body class="bacc">
    <div class="top-title">
        <div class="nav-left"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
        订单信息
    </div>
    <!--车主信息-->
    <div class="box-box"id="ownerInfo" v-cloak>
        <div class="box">
            <div class="title-box"><div class="title">车主信息<i class="fa fa-angle-up" aria-hidden="true" @click="toggle(event.currentTarget)"></i></div></div>
            <div class="item">
                <div class="left">车主姓名</div>
                <div class="right"><input type="text"  readonly v-model="personInfo.ownerName"></div>
            </div>
            <div class="item">
                <div class="left">身份证号</div>
                <div class="right"><input type="text"  readonly v-model="personInfo.ownerID"></div>
            </div>
            <div class="item">
                <div class="left">手机号</div>
                <div class="right"><input type="text"  readonly v-model="personInfo.ownerMobile"></div>
            </div>
            <div class="item">
                <div class="left">投保人</div>
                <div class="right">
                    <div class="chec-one">
                        <input type="checkbox" value="1" id="one"  class="hide" v-model="show"/>
                        <label for="one" @click="changeInfo(show)"></label>
                    </div>
                    同车主
                </div>
            </div>
            <!--<div id="insurance_applicant" >-->
            <div class="item" v-show="!show">
                <div class="left">投保人姓名</div>
                <div class="right"><input type="text" placeholder="投保人姓名" v-model="receiver.applicantName" id="applicantName"></div>
            </div>
            <div class="item" v-show="!show">
                <div class="left">投保人身份证号码</div>
                <div class="right"><input type="text" placeholder="投保人身份证号码" v-model="receiver.applicantID" id="applicantID"></div>
            </div>
            <div class="item" v-show="!show">
                <div class="left">投保人电话号码</div>
                <div class="right"><input type="text" placeholder="投保人电话" v-model="receiver.applicantMobile" id="applicantMobile"></div>
            </div>
<!--            </div>-->
        </div>
        <!--车辆信息-->
        <div class="box" id="carInfo">
            <div class="title-box">
                <div class="title">车辆信息<i class="fa fa-angle-up" aria-hidden="true" @click="toggle(event.currentTarget)"></i></div>
            </div>
            <div class="item">
                <div class="left">车牌号</div>
                <div class="right"><input type="text"  readonly v-model="carInfo.LicenseNo"></div>
            </div>
            <div class="item">
                <div class="left">车架号</div>
                <div class="right"><input type="text" readonly v-model="carInfo.vin"></div>
            </div>
            <div class="item">
                <div class="left">品牌型号</div>
                <div class="right"><input type="text"  readonly v-model="carInfo.brandName"></div>
            </div>
            <div class="item">
                <div class="left">发动机号</div>
                <div class="right"><input type="text" readonly v-model="carInfo.engineNo"></div>
            </div>
            <div class="item">
                <div class="left">注册日期</div>
                <div class="right"><input type="datetime" readonly v-model="carInfo.RegisterDate"></div>
            </div>
            <div class="item">
                <div class="left">过户</div>
                <div class="right">
                    <div class="chec-one">
                        <input type="checkbox" value="1" id="three" name="" class="hide" v-model="carInfo.IsTrans"/>
                        <label for="three" onclick="return false;"></label>
                    </div>
                </div>
            </div>
        </div>
        <!--险种信息-->
        <div class="box" id="insuranceInfo">
            <div class="title-box"><div class="title">险种信息<i class="fa fa-angle-up" aria-hidden="true" @click="toggle(event.currentTarget)"></i></div></div>
            <div class="item">
                <div class="left">保险起期</div>
                <div class="right"><input type="text"  v-model="allInsurance.biBeginDate" readonly></div>
            </div>
            <div class="item"  v-for="aiCoverage in allInsurance.ai">
                <div class="left">{{aiCoverage.coverageName}}</div>
                <div class="right"><input type="text"  v-model="aiCoverage.insuredPremium" readonly></div>
            </div>
            <div class="item" v-for="biCoverage in allInsurance.bi">
                <div class="left">{{biCoverage.coverageName}}</div>
                <div class="middle" v-if="biCoverage.coverageCode == 'D3' || biCoverage.coverageCode == 'D4'">{{biCoverage.insuredAmount.toString() == 'Y' ? '投保' : (biCoverage.insuredAmount%10000==0 ? (biCoverage.insuredAmount/10000)+'万': biCoverage.insuredAmount )}}/座</div>
                <div class="middle" v-else>{{biCoverage.insuredAmount.toString() == 'Y' ? '投保' : (biCoverage.insuredAmount%10000==0 ? (biCoverage.insuredAmount/10000)+'万': biCoverage.insuredAmount )}}</div>
                <div class="right"><input type="text" v-model="biCoverage.insuredPremium" readonly></div>
            </div>
            <div class="item">
                <div class="left">总金额</div>
                <div class="right"><input type="text"  :value="'¥'+allInsurance.total" readonly></div>
            </div>
            <div class="item">
                <div class="left">优惠金额</div>
                <div class="right"><input type="text"  :value="'- ¥'+ allInsurance.disCount" readonly></div>
            </div>
            <div class="item">
                <div class="left">实际支付</div>
                <div class="right"><input type="text"  :value="'¥'+allInsurance.pay" readonly></div>
            </div>
        </div>
        <!--配送信息-->
        <div class="box" id="deliverInfo">
            <div class="title-box"><div class="title">配送信息<i class="fa fa-angle-up" aria-hidden="true" @click="toggle(event.currentTarget)"></i></div></div>
            <div class="item">
                <div class="left">收件人姓名</div>
                <div class="right"><input type="text"  v-model="receiver.addresseeName" id="addresseeName"></div>
            </div>
            <div class="item">
                <div class="left">收件人电话号码</div>
                <div class="right"><input type="text"  v-model="receiver.addresseeMobile" id="addresseeMobile"></div>
            </div>
            <div class="item">
                <div class="left" style="min-width:7rem;">收件人地址</div>
                <input class="hide" readonly v-model="receiver.addresseeProvince">
                <input class="hide" readonly v-model="receiver.addresseeCity">
                <input class="hide" readonly v-model="receiver.addresseeCounty">
                <div class="right has-icon" id="address"><input type="text"  placeholder="请选择" readonly onfocus="document.activeElement.blur();" id="myAddress"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
            </div>
            <div class="item">
                <div class="left">详细地址</div>
                <div class="right"><input type="text" placeholder="必填" required v-model="receiver.addresseeDetails" id="addresseeDetails"></div>
            </div>
            <div class="item">
                <div class="left">邮箱</div>
                <div class="right"><input type="email" placeholder="必填" v-model="receiver.policyEmail" id="policyEmail"></div>
            </div>
        </div>
        <div class="bottom">
            <div class="protocol">
                已阅读<a style="text-decoration: none;" @click="toRead">《投保协议》</a>
                <div class="chk-box">
                    <input type="checkbox" id="checkbox_c1" class="chk_3 hide" v-model="ISRead"/>
                    <label for="checkbox_c1"></label>
                </div>
            </div>
            <div class="button">
                <div class="left">
                    <input type="button" value="重新报价" @click="reCalculate">
                </div>
                <div class="right">
                    <input type="button" value="支付" id="pay" @click="underwrite">
                </div>
            </div>
        </div>
    </div>
    <div class="modal hide">
        <div class="body">
            <div class="head">
                <img src="images/close.png" class="close" onclick="toClose">
            </div>
            <div class="content">
                <h1>投保协议</h1>
                <h2>第一条   合作原则 </h2>
                <p>（一）甲、乙双方应信守合同，全面、认真的履行本合作协议的内容；</p>
                <p>（二）甲、乙双方应共同维护双方的信誉、品牌和利益。 </p>
                <h2>第二条   合作范围 </h2>
                <p>（一）保险事故车辆配件的报价及车辆的修理服务；</p>
                <p>（二）保险车辆的救援及维修保养优惠服务；</p>
                <p>（三）双方相互提供长久稳定的宣传渠道；</p>
                <p>（四）其他有利于双方共同发展的合作。</p>
                <h2>第三条   甲方的权利和义务 </h2>
                <p>（一）保险事故车辆维修</p>
                <p class="">
                    1、甲方的查勘定损人员在配件价格和汽车构造方面有异议的地方应向乙方进行咨询；
                    2、甲方的查勘定损人员在处理各种车系事故车辆时应优先推荐客户到乙方去维修，就甲乙双方达 成的有利于客户的优质服务介绍给客户，并征得客户的同意；
                    3、乙方为甲方0指定的各种系事故车辆拆检定损维修服务商，甲方在征得客户同意的情况下应优 先推荐保险事故车辆到乙方拆检维修；
                    4、甲方推荐的客户到乙方维修时，乙方应给予热情的接待和服务，让客户真正体会到享受的是与 众不同的服务，提供维修绿色通道，保质保量按时的完成事故车辆的维修，体现出保险公司“卓越服务”的原则；
                    5、甲方推荐到乙方拆检的保险事故车辆，不管甲方的定损员在不在拆检现场，乙方都应以尊重事 实地进行拆检；在拆检的过程中不得更换事故车辆的原好件，如有发现，乙方将赔付给甲方两倍的损失并立即终止合作，情节严重的将追究乙方的法律责任，事故拆检完成后应及时通知甲方的定损人员进行定损；
                    6、甲乙双方在定损事故车辆时要坚持保险事故车辆“以修为主”的原则，定损现场特别是在客户 在场的情况下不说不做不利于双方友好合作的话，有争议的地方甲乙双方协商解决，不应给客户带来更大的麻烦；
                    7、 甲方定损员不得强行乙方维修无法修复的零配件，以影响双方的合作；
                    8、甲乙双方协定维修的零配件在客户有异议时，乙方应给客户当场质量保证的承诺，以消除客户 心理上的疑虑，服务好客户；
                    9、由被保险人委托乙方理赔的案件，甲方要协助乙方了解被保险人车辆的承保理赔情况，以方便 乙方代理理赔；
                </p>
            </div>
        </div>
    </div>
    <div class="mask hide"></div>
    <div class="alert"></div>
</body>
</html>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/dialog.js"></script>
<script src="js/mobile-select-area.js"></script>
<script src="js/jquery.mloading.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/common.js"></script>
<script>
    var vm,disCount,totalPremium;

    var myConfig = {
        text:"正在核保，请稍后...",//加载文字，默认值：加载中...
        icon:"images/loading.gif",//加载图标，默认值：一个小型的base64的gif图片
        html:false,//设置加载内容是否是html格式，默认值是false
        content:"",//忽略icon和text的值，直接在加载框中显示此值
        mask:true//是否显示遮罩效果，默认显示
    };

    $(function(){

       // var JQBJ = JSON.parse(localStorage.getItem("JQBJ"));
        var YDSF = JSON.parse(localStorage.getItem("YDSF"));
        var JQBJ = YDSF.JQBJ;
        disCount = YDSF.disCount;
        totalPremium = YDSF.totalPremium;


        var carInfo = JSON.parse(localStorage.getItem("YDSF_carInfo"));
        carInfo.IsTrans = carInfo.IsTrans=="0" ? false :true;
        var personInfo = JSON.parse(localStorage.getItem("YDSF_personInfo"));

        console.log('carInfo');
        console.log(carInfo);
		console.log(personInfo.ownerName);        
        console.log("personInfo");
        console.log(personInfo);
        console.log(JQBJ);
        var allInsurance = getAllInsurance (JQBJ);
        console.log(allInsurance);

        vm = new Vue({
            el:"#ownerInfo",
            data:{
                show:false,
                ISRead:false,
                allInsurance:allInsurance,
                receiver:{
                    addresseeName:"",//收件人姓名
                    addresseeMobile:"",//收件人电话
                    addresseeDetails:"",//详细地址
                    addresseeCounty:'',
                    addresseeCity:'',
                    addresseeProvince:'',//收件人地址
                    policyEmail:"",//收件人邮箱
                    applicantName:"",
                    applicantID:"",
                    applicantMobile:""
                    
                },
                carInfo:carInfo,
                personInfo:personInfo
            },
            methods:{
                toRead:function(){
                    vm.ISRead = true;
                    $(".mask").removeClass("hide");
                    $(".modal").removeClass("hide");
                },
                toggle:function(target){
                    console.log(target);
                    var _this = $(target);
                    if(_this.hasClass("fa-angle-up")){
                        _this.parent().parent().siblings(".item").addClass("hide");
                        _this.removeClass("fa-angle-up").addClass("fa-angle-down");
                    }else{
                        _this.parent().parent().siblings(".item").removeClass("hide");
                        _this.removeClass("fa-angle-down").addClass("fa-angle-up");
                    }
                },
                changeInfo:function(flag){
                    if(!flag){
                        vm.receiver.applicantName = personInfo.ownerName;
                        vm.receiver.applicantID = personInfo.ownerID;
                        vm.receiver.applicantMobile = personInfo.ownerMobile;
                    }else{
                        vm.receiver.applicantName = "";
                        vm.receiver.applicantID = "";
                        vm.receiver.applicantMobile = "";
                    }
                },
                underwrite:function(){
                    if(!vm.ISRead){
                        popInfo("请先阅读投保协议");
                        return;
                    }
                    if(vm.receiver.addresseeName == ""){
                        popInfo("收件人姓名不能为空","#addresseeName");
                        return;
                    }
                    if(vm.receiver.addresseeMobile == ""){
                        popInfo("手机号不能为空","#addresseeMobile");
                        return;
                    }else{
                        if(!mobileReg.test(vm.receiver.addresseeMobile)){
                            popInfo("手机号格式不正确","#addresseeMobile");
                            return;
                        }
                    }
                    if($("#myAddress").val().trim() == ""){
                        popInfo("地址不能为空","#myAddress");
                        return;
                    }
                    if($("#addresseeDetails").val().trim() == ""){
                        popInfo("地址不能为空","#addresseeDetails");
                        return;
                    }
                    if(vm.receiver.policyEmail == ""){
                        popInfo("邮箱不能为空","#policyEmail");
                        return;
                    }else{
                        if(!emailReg.test(vm.receiver.policyEmail)){
                            popInfo("邮箱格式不正确","#policyEmail");
                            return;
                        }
                    }

                    if(!vm.show){
                        if(vm.receiver.applicantName == ""){
                            popInfo("投保人姓名不能为空","#applicantName");
                            return;
                        }
                        if(vm.receiver.applicantID == ""){
                            popInfo("投保人身份证号码不能为空","#applicantID");
                            return;
                        }else{
                            if(!IDReg.test(vm.receiver.applicantID)){
                                popInfo("投保人身份证不合法","#addresseeMobile");
                                return;
                            }
                        }
                        if(vm.receiver.applicantMobile == ""){
                            popInfo("投保人手机号不能为空","#applicantMobile");
                            return;
                        }else{
                            if(!mobileReg.test(vm.receiver.applicantMobile)){
                                popInfo("手机号格式不正确","#addresseeMobile");
                                return;
                            }
                        }
                    }
                    var data = vm.receiver;
                    console.log(data);
                    $("body").mLoading(myConfig);
                    toUnderwrite(data);
                },
                reCalculate:function(){
                    window.location.href = "index.html";
                }
            }
        });











        //加载地址控件
        var selectArea = new MobileSelectArea();
        selectArea.init({ trigger: '#myAddress', value: "", data: [],position: "bottom"});
        $.get(ip+'/dict/list', function (result) {
            selectArea.settings.data = result.data.data;
            selectArea.data = result.data.data;
        })

//        $.get("data/address.json", function (result) {
//            console.log(result);
//            selectArea.settings.data = result.data;
//            selectArea.data = result.data;
//        });
    });


    function getAllInsurance (JQBJ){
        var allInsurance = {};
        allInsurance.total = 0;
        allInsurance.ai = [];
        allInsurance.bi = [];

        allInsurance.biBeginDate = JQBJ[0].biBeginDate;
        allInsurance.biPremium = JQBJ[0].biPremium;
        allInsurance.bizID = JQBJ[0].bizID;
       // allInsurance.YGBX = JQBJ[0].YGBX;
        allInsurance.channelCode = JQBJ[0].channelCode;
        allInsurance.thpBizID = JQBJ[0].thpBizID;
        allInsurance.disCount = disCount;
        allInsurance.pay;

        var coverage  = JQBJ[0].CoverageList;
        var len = coverage.length;
        for(var i = 0; i < len; i  ++){
            var code = coverage[i].coverageCode;
            if(code =='FORCEPREMIUM'){
                allInsurance.ai.push(coverage[i]);
            }else{
                allInsurance.bi.push(coverage[i]);
            }
            allInsurance.total = allInsurance.total + parseFloat(coverage[i].insuredPremium);
        }
        allInsurance.total = allInsurance.total.toFixed(2);
        allInsurance.pay = totalPremium;
        return allInsurance;
    }


    function  toUnderwrite(data){
    	console.log("进入")
        var url = ip + "/insurance/reinsurance";
        $.ajax({
            url:url,
            type:"post",
            data:JSON.stringify(data),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success:function(data){
                console.log(data);
                $("body").mLoading("hide");
                if(data.code == "0000"){
                    if(data.data.state == "1"){
                        var payInfo = data.data.Data;
                        console.log(data.data.orderNumber);
                        localStorage.setItem("YDSF_payInfo",JSON.stringify(payInfo));
                        window.location.href = "http://mobile.ydche.com/wx/pay/paystyle.html?orderNumber="+data.data.orderNumber;
                    }
                }else{
                    popInfo(data.msg);
                }
            },
            error:function(xhr,textStatus){
                $("body").mLoading("hide");
                popInfo("网络异常，请稍后重试。");
                console.log('错误');
                console.log(xhr);
                console.log(textStatus);
            }
        });
    }


    function  toClose(){
        $(".mask").addClass("hide");
        $(".modal").addClass("hide");
    }
</script>